@avatar-size-middle: 34px;
@avatar-size-small: 28px;

.avatar-size(@size) {
    width: @size;
    height: @size;
    line-height: @size;
}

.avatar {
    position: relative;

    overflow: hidden;
    display: inline-block;

    color: rgb(var(--bg-color-secondary));
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;

    background: rgb(var(--grey-200));

    &-square {
        border-radius: var(--border-radius-base);
    }

    &-circle {
        border-radius: 50%;
    }

    &-middle {
        .avatar-size(@avatar-size-middle);
    }

    &-small {
        .avatar-size(@avatar-size-small);
    }

    &-image {
        background: transparent;

        > img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
}
